<template>
	<view class="roc-list u-p-l-20 u-p-r-20">
		<view class="list-item u-p-20" v-for="(item, index) in dataList" :key="item.id">
			<view class="top">
				<view class="area1">
					<template v-if="dataFieldList.area1.length">
						<text v-for="field in dataFieldList.area1" :key="field">{{ item[field] }}</text>
					</template>
				</view>
				<view class="area2 cic-common tag">
					<template v-if="dataFieldList.area2.length">
						<text v-for="field in dataFieldList.area2" :key="field">{{ item[field] }}</text>
					</template>
				</view>
			</view>
			<view class="center">
				<template v-if="dataFieldList.area3.length">
					<view class="area3" v-for="field in dataFieldList.area3" :key="field">{{ item[field] }}</view>
				</template>
			</view>
			<view class="bottom">
				<template v-if="dataFieldList.area4.length">
					<view class="area4" v-for="field in dataFieldList.area4" :key="field">{{ item[field] }}</view>
				</template>
			</view>
			<view class="btn-box">
				<roc-btn type="primary" text="编辑"></roc-btn>
				<roc-btn type="error" text="删除"></roc-btn>
				<roc-btn type="primary" text="详情"></roc-btn>
			</view>
		</view>
	</view>
</template>

<script>
import dataList from './data.js';

export default {
	name: 'roc-list',
	data() {
		return {
			// 区域位 字段
			dataFieldList: {
				area1: ['a'],
				area2: ['b'],
				area3: ['c', 'd', 'e'],
				area4: ['f', 'g']
			},
			// 数据
			dataList
		};
	}
};
</script>

<style lang="scss">
.roc-list {
	$titleFontSize: 32rpx;
	$contFontSize: 26rpx;
	.list-item {
		margin-top: 20rpx;
		border: 1px solid #ebeef5;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
		.top,
		.center,
		.bottom {
			display: flex;
			justify-content: space-between;
		}
		.top {
			.area1 {
				font-size: $titleFontSize;
			}
			.area2 {
				margin-left: 10rpx;
			}
		}
		.center {
			flex-wrap: wrap;
			margin-top: 20rpx;
			padding-bottom: 10rpx;
			.area3 {
				width: 50%;
				color: #333;
				line-height: 2;
				font-size: $contFontSize;
			}
		}
		.bottom {
			flex-wrap: wrap;
			border-top: 1px solid rgba(0, 0, 0, 0.06);
			padding: 20rpx 0;
			.area4 {
				width: 50%;
				color: #333;
				font-size: $contFontSize;
			}
		}
		.btn-box {
			display: flex;
			padding-top: 20rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
			justify-content: right;
			.roc-btn {
				font-size: 22rpx;
			}
		}
	}
}
</style>
